<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/5-2022-10-17-lidare.css">
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/c/font_3691917_7z5gh9x717d.css?spm=a313x.7781069.1998910419.53&file=font_3691917_7z5gh9x717d.css">
</head>

<body>
    <div class="login">
        <div>手机号登录</div>
        <label>
            <p>手机号:</p>
            <input type="text" placeholder="请输入手机号" maxlength="11">
            <div class="prompt"></div>
        </label>
        <label>
            <p>验证码:</p>
            <input type="text" placeholder="请输入验证码" maxlength="6">
            <div class="Verification">发送验证码</div>
        </label>
    </div>
    <script>
        window.onload = function () {
            var intercept = false;
            var input = document.getElementsByTagName("input")[0];
            var Verification = document.getElementsByClassName("Verification")[0];
            Verification.addEventListener('click', function () {
                var prompt = document.getElementsByClassName("prompt")[0];
                prompt.textContent = /^1[3-9]\d{9}$/.test(input.value) ? "" : "手机号格式不正确";
                if (prompt.textContent || intercept) return;
                intercept = true;
                var num = 60;
                Verification.classList.add("active");
                Verification.textContent = `${--num}s后重新发送`;
                var time = setInterval(function () {
                    Verification.textContent = `${--num}s后重新发送`;
                    if (num == 0) {
                        Verification.classList.remove("active");
                        Verification.textContent = "发送验证码";
                        intercept = false;
                        clearInterval(time);
                    }
                }, 1000);
            }, false)
        }
    </script>
</body>

</html>